<template>
  <div id="overview" :style="isFullScreen ? { background: '#fff' } : {}">
    <Topo ref="topoElement" @loadInfo="changeStyle" :style="topoStyle" />
    <div class="index-wrapper" :style="indexStyle">
      <div class="contorller-wrap">
        <a-button
          v-if="!isFullScreen"
          type="primary"
          @click="changeStyle(undefined)"
        >
          返回
        </a-button>

        <a-button
          v-if="!isFullScreen"
          style="margin: 0 0 0 18px"
          type="primary"
          @click="fullScreen()"
        >
          全屏
        </a-button>

        <a-button v-else type="primary" @click="exitFullScreen()">
          退出全屏
        </a-button>
        <!-- <a-form layout="inline">
        <a-form-item label="数据中心">
          <a-select
            v-model="datacenterId"
            style="min-width: 200px"
            :getPopupContainer="
              (triggerNode) => {
                return triggerNode.parentNode || document.body;
              }
            "
            @change="(v) => loadResourceList(v)"
          >
            <a-select-option
              v-for="item in datacenterList"
              :key="'datacenter_' + item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form> -->
      </div>
      <a-row type="flex" justify="space-around">
        <a-col :span="7">
          <div class="item-wrapper">
            <div class="item-header">
              <span class="item-header-left">
                <a-icon type="hdd" />
                {{
                  airObj && airObj.id
                    ? "L1层：" + airObj.name
                    : "L1层：暂无空调数据"
                }}
              </span>
              <span class="item-header-right">
                实时值
                <a-button
                  type="link"
                  icon="caret-left"
                  size="small"
                  class="control-btn"
                  @click="nextObj('minus', 'air')"
                />
                <a-button
                  type="link"
                  icon="caret-right"
                  size="small"
                  class="control-btn"
                  @click="nextObj('plus', 'air')"
                />
              </span>
            </div>
            <div class="item-body">
              <div class="item-body-tr" v-if="!airList || !airList.length">
                <span class="item-body-tr-left"> 暂无数据 </span>
              </div>
              <div
                v-else
                class="item-body-tr"
                v-for="(d, i) in airMeterList"
                :key="i"
              >
                <span class="item-body-tr-left">
                  {{ meterCnMap[d.meter] }}
                </span>
                <span class="item-body-tr-right">
                  {{
                    d.volume
                      ? parseFloat(d.volume).toFixed(2) + " " + d.unit
                      : ""
                  }}
                </span>
              </div>
            </div>
          </div>
          <div class="item-wrapper">
            <div class="item-header">
              <span class="item-header-left">
                <a-icon type="hdd" />
                {{
                  upsObj && upsObj.id
                    ? "L1层：" + upsObj.name
                    : "L1层：暂无UPS数据"
                }}
              </span>
              <span class="item-header-right">
                实时值
                <a-button
                  type="link"
                  icon="caret-left"
                  size="small"
                  class="control-btn"
                  @click="nextObj('minus', 'ups')"
                />
                <a-button
                  type="link"
                  icon="caret-right"
                  size="small"
                  class="control-btn"
                  @click="nextObj('plus', 'ups')"
                />
              </span>
            </div>
            <div class="item-body">
              <div class="item-body-tr" v-if="!upsList || !upsList.length">
                <span class="item-body-tr-left"> 暂无数据 </span>
              </div>
              <div
                v-else
                class="item-body-tr"
                v-for="(d, i) in upsMeterList"
                :key="i"
              >
                <span class="item-body-tr-left">
                  {{ meterCnMap[d.meter] }}
                </span>
                <span class="item-body-tr-right">
                  {{
                    d.volume
                      ? parseFloat(d.volume).toFixed(2) + " " + d.unit
                      : ""
                  }}
                </span>
              </div>
            </div>
          </div>
          <div class="item-wrapper">
            <div class="item-header">
              <span class="item-header-left">
                <a-icon type="hdd" />
                {{
                  powerObj && powerObj.id
                    ? "L1层：" + powerObj.name
                    : "L1层：暂无配电箱数据"
                }}
              </span>
              <span class="item-header-right">
                实时值
                <a-button
                  type="link"
                  icon="caret-left"
                  size="small"
                  class="control-btn"
                  @click="nextObj('minus', 'power')"
                />
                <a-button
                  type="link"
                  icon="caret-right"
                  size="small"
                  class="control-btn"
                  @click="nextObj('plus', 'power')"
                />
              </span>
            </div>
            <div class="item-body">
              <div class="item-body-tr" v-if="!powerList || !powerList.length">
                <span class="item-body-tr-left"> 暂无数据 </span>
              </div>
              <div
                v-else
                class="item-body-tr"
                v-for="(d, i) in powerMeterList"
                :key="i"
              >
                <span class="item-body-tr-left">
                  {{ meterCnMap[d.meter] }}
                </span>
                <span class="item-body-tr-right">
                  {{
                    d.volume
                      ? parseFloat(d.volume).toFixed(2) + " " + d.unit
                      : ""
                  }}
                </span>
              </div>
            </div>
          </div>
          <div class="item-wrapper">
            <div class="item-header">
              <span class="item-header-left">
                <a-icon type="cluster" />
                {{
                  serverObj && serverObj.id
                    ? "L2层：" + serverObj.name
                    : "L2层：暂无服务器数据"
                }}
              </span>
              <span class="item-header-right">
                实时值
                <a-button
                  type="link"
                  icon="caret-left"
                  size="small"
                  class="control-btn"
                  @click="nextObj('minus', 'server')"
                />
                <a-button
                  type="link"
                  icon="caret-right"
                  size="small"
                  class="control-btn"
                  @click="nextObj('plus', 'server')"
                />
              </span>
            </div>
            <div class="item-body">
              <div
                class="item-body-tr"
                v-for="(d, i) in serverMeterList"
                :key="i"
              >
                <span class="item-body-tr-left">
                  {{ serverMeterCnMap[d.meter] }}
                </span>
                <span class="item-body-tr-right">
                  {{
                    d.volume
                      ? parseFloat(d.volume).toFixed(2) +
                        " " +
                        meterUnitMap[d.meter]
                      : ""
                  }}
                </span>
              </div>
              <div
                class="item-body-tr"
                v-if="!serverMeterList || !serverMeterList.length"
              >
                <span class="item-body-tr-left"> 暂无数据 </span>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="middle-wrapper">
            <div
              :class="dashboardClasses"
              @click="$router.push({ path: '/f030203' })"
            >
              <template v-if="radarData && radarData.length">
                <a-popover
                  placement="rightTop"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode;
                    }
                  "
                >
                  <template slot="title">
                    <div class="radar-title">
                      <span>{{
                        datacenterList && datacenterList.length > 0
                          ? datacenterList.filter(
                              (item) => item.id === datacenterId
                            )[0].name
                          : ""
                      }}</span>

                      <div class="title-progress">
                        <span>模型评分：</span>
                        <a-progress
                          style="width: 58%"
                          status="active"
                          :percent="Number.parseInt(totalScore)"
                          :format="(percent) => `${percent}`"
                          :stroke-color="
                            totalScore < 60
                              ? '#b93b04'
                              : totalScore < 80
                              ? '#ffb400'
                              : '#089b04'
                          "
                        />
                      </div>
                    </div>
                  </template>

                  <template slot="content">
                    <Radar
                      style="width: 670px"
                      chartId="radar"
                      title="配电子网负荷"
                      :data="radarData"
                    />
                  </template>
                  <div style="width: 208px; margin: 0 auto">
                    <div class="dashboard-wrapper-title">
                      <span>L0层：配电子网负荷</span>
                    </div>
                    <div class="dashboard-wrapper-value">
                      <v-count-to :endVal="loadVal || 0" unit="KW" />
                      <!-- {{ (loadVal || "--") + " KW" }} -->
                    </div>
                    <div class="dashboard-wrapper-others">
                      <!-- <span>
                      <img src="@assets/analysis/pue.png" />
                      <v-count-to
                        style="display: inline-block"
                        :endVal="pueVal || 0"
                      />
                    </span> -->
                      <span class="dashboard-wrapper-others-temperature">
                        <img src="@assets/analysis/temperature.png" />
                        <v-count-to
                          style="display: inline-block"
                          :endVal="temperatureVal || 0"
                          unit="℃"
                        />
                      </span>
                      <span class="dashboard-wrapper-others-humidity">
                        <img src="@assets/analysis/humidity.png" />
                        <v-count-to
                          style="display: inline-block"
                          :endVal="3.1"
                          unit="%"
                        />
                      </span>
                    </div>
                  </div>
                </a-popover>
              </template>
              <template v-else>
                <a-spin />
              </template>
            </div>
            <div class="count-wrapper">
              <a-row type="flex" justify="center">
                <a-col :span="7">
                  <div class="count-item">
                    <span class="count-item-img">
                      <img src="@assets/analysis/air.png" />
                    </span>
                    <span class="count-item-info">
                      <span class="count-item-info-title">空调</span>
                      <span class="count-item-info-number">
                        <span class="count-item-info-number-value">
                          {{ airList.length }}
                        </span>
                        台
                      </span>
                    </span>
                  </div>
                </a-col>
                <a-col :span="7">
                  <div class="count-item">
                    <span class="count-item-img">
                      <img src="@assets/analysis/power.png" />
                    </span>
                    <span class="count-item-info">
                      <span class="count-item-info-title">配电箱</span>
                      <span class="count-item-info-number">
                        <span class="count-item-info-number-value">
                          {{ powerList.length }}
                        </span>
                        台
                      </span>
                    </span>
                  </div>
                </a-col>
                <a-col :span="7">
                  <div class="count-item">
                    <span class="count-item-img">
                      <img src="@assets/analysis/ups.png" />
                    </span>
                    <span class="count-item-info">
                      <span class="count-item-info-title">UPS</span>
                      <span class="count-item-info-number">
                        <span class="count-item-info-number-value">
                          {{ upsList.length }}
                        </span>
                        台
                      </span>
                    </span>
                  </div>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-col>
        <a-col :span="7">
          <div class="item-wrapper">
            <div class="item-header">
              <span class="item-header-left">
                <a-icon type="cluster" />
                {{
                  switcherObj && switcherObj.id
                    ? "L2层：" + switcherObj.name
                    : "L2层：暂无交换机数据"
                }}
              </span>
              <span class="item-header-right">
                实时值
                <a-button
                  type="link"
                  icon="caret-left"
                  size="small"
                  class="control-btn"
                  @click="nextObj('minus', 'switcher')"
                />
                <a-button
                  type="link"
                  icon="caret-right"
                  size="small"
                  class="control-btn"
                  @click="nextObj('plus', 'switcher')"
                />
              </span>
            </div>
            <div class="item-body">
              <div
                class="item-body-tr"
                v-for="(d, i) in switcherMeterList"
                :key="i"
              >
                <span class="item-body-tr-left">
                  {{ switchMeterCnMap[d.meter] }}
                </span>
                <span class="item-body-tr-right">
                  {{
                    d.volume
                      ? parseFloat(d.volume).toFixed(2) +
                        " " +
                        meterUnitMap[d.meter]
                      : ""
                  }}
                </span>
              </div>
              <div
                class="item-body-tr"
                v-if="!switcherMeterList || !switcherMeterList.length"
              >
                <span class="item-body-tr-left"> 暂无数据 </span>
              </div>
            </div>
          </div>
          <div class="item-wrapper">
            <div class="item-header">
              <span class="item-header-left">
                <a-icon type="hdd" />
                {{
                  vmObj && vmObj.id
                    ? "L3层：" + vmObj.name
                    : "L3层：暂无虚拟机数据"
                }}
              </span>
              <span class="item-header-right">
                实时值
                <a-button
                  type="link"
                  icon="caret-left"
                  size="small"
                  class="control-btn"
                  @click="nextObj('minus', 'vm')"
                />
                <a-button
                  type="link"
                  icon="caret-right"
                  size="small"
                  class="control-btn"
                  @click="nextObj('plus', 'vm')"
                />
              </span>
            </div>
            <div class="item-body">
              <div class="item-body-tr" v-for="(d, i) in vmMeterList" :key="i">
                <span class="item-body-tr-left">
                  {{ vmMeterCnMap[d.meter] }}
                </span>
                <span class="item-body-tr-right">
                  {{
                    d.volume
                      ? parseFloat(d.volume).toFixed(2) +
                        " " +
                        meterUnitMap[d.meter]
                      : ""
                  }}
                </span>
              </div>
              <div
                class="item-body-tr"
                v-if="!vmMeterList || !vmMeterList.length"
              >
                <span class="item-body-tr-left"> 暂无数据 </span>
              </div>
            </div>
          </div>
          <div class="item-wrapper">
            <div class="item-header">
              <span class="item-header-left">
                <a-icon type="hdd" />
                {{
                  containerObj && containerObj.id
                    ? "L3层：" + containerObj.name
                    : "L3层：暂无容器数据"
                }}
              </span>
              <span class="item-header-right">
                实时值
                <a-button
                  type="link"
                  icon="caret-left"
                  size="small"
                  class="control-btn"
                  @click="nextObj('minus', 'container')"
                />
                <a-button
                  type="link"
                  icon="caret-right"
                  size="small"
                  class="control-btn"
                  @click="nextObj('plus', 'container')"
                />
              </span>
            </div>
            <div class="item-body">
              <div
                class="item-body-tr"
                v-for="(d, i) in containerMeterList"
                :key="i"
              >
                <span class="item-body-tr-left">
                  {{ containerMeterCnMap[d.meter] }}
                </span>
                <span class="item-body-tr-right">
                  {{
                    d.volume
                      ? parseFloat(d.volume).toFixed(2) +
                        " " +
                        meterUnitMap[d.meter]
                      : ""
                  }}
                </span>
              </div>
              <div
                class="item-body-tr"
                v-if="!containerMeterList || !containerMeterList.length"
              >
                <span class="item-body-tr-left"> 暂无数据 </span>
              </div>
            </div>
          </div>
          <div class="item-wrapper">
            <div class="item-header">
              <span class="item-header-left">
                <a-icon type="star" />
                {{
                  appObj && appObj.id
                    ? "L4层：" + appObj.name
                    : "L4层：暂无应用数据"
                }}
              </span>
              <span class="item-header-right">
                实时值
                <a-button
                  type="link"
                  icon="caret-left"
                  size="small"
                  class="control-btn"
                  @click="nextObj('minus', 'app')"
                />
                <a-button
                  type="link"
                  icon="caret-right"
                  size="small"
                  class="control-btn"
                  @click="nextObj('plus', 'app')"
                />
              </span>
            </div>
            <div class="item-body">
              <div class="item-body-tr" v-for="(d, i) in appMeterList" :key="i">
                <span class="item-body-tr-left">
                  {{ appMeterCnMap[d.meter] }}
                </span>
                <span class="item-body-tr-right">
                  {{
                    d.volume
                      ? parseFloat(d.volume).toFixed(2) +
                        " " +
                        meterUnitMap[d.meter]
                      : ""
                  }}
                </span>
              </div>
              <div
                class="item-body-tr"
                v-if="!appMeterList || !appMeterList.length"
              >
                <span class="item-body-tr-left"> 暂无数据 </span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { gPostAction } from "@/api/manage";
import Radar from "./modules/charts/Radar";
import Topo from "./modules/Topo";
import VCountTo from "./modules/VCountTo";

export default {
  name: "F010101",
  components: { Radar, Topo, VCountTo },
  data() {
    return {
      overviewDom: null,
      isFullScreen: false,
      topoStyle: {},
      indexStyle: {
        display: "none",
      },
      radarData: [],
      totalScore: "",
      loadVal: "",
      pueVal: "",
      temperatureVal: "",
      datacenterId: "",
      datacenterList: [],
      dashboardTimer: "",
      dashboardStatus: "danger",
      dashboardClasses: ["dashboard-wrapper", "dashboard-wrapper-bg-normal"],
      airIndex: 0,
      upsIndex: 0,
      powerIndex: 0,
      serverIndex: 0,
      switcherIndex: 0,
      vmIndex: 0,
      containerIndex: 0,
      appIndex: 0,
      airList: [],
      upsList: [],
      powerList: [],
      serverList: [],
      switcherList: [],
      vmList: [],
      containerList: [],
      appList: [],
      airObj: {},
      upsObj: {},
      powerObj: {},
      serverObj: {},
      switcherObj: {},
      vmObj: {},
      containerObj: {},
      appObj: {},
      airMeterList: [],
      upsMeterList: [],
      powerMeterList: [],
      serverMeterList: [],
      switcherMeterList: [],
      vmMeterList: [],
      containerMeterList: [],
      appMeterList: [],
      serverMeterCnMap: {
        "server.power": "服务器实时功耗",
        // "server.mem_total": "服务器内存总量",
        // "server.storage_total": "服务器存储总量",
        "server.cpu_frequency": "服务器CPU频率",
        "host.cpu_util": "服务器CPU利用率",
        // "host.memory_util": "服务器内存利用率",
        // "host.cpu_load_1min": "服务器CPU负载",
        // "server.bandWidth": "服务器带宽",
        // "server.storage_available": "服务器存储可用量",
        // "host.temperature": "服务器温度",
        // "server.mem_speed": "服务器内存速率",
        // "host.disk_read_rate": "服务器磁盘读速率",
        // "host.disk_write_rate": "服务器磁盘写速率",
      },
      switchMeterCnMap: {
        "switcher.in_octets": "交换机收包速率",
        "switcher.out_octets": "交换机发包速率",
      },
      vmMeterCnMap: {
        "vm.cpu_util": "虚拟机CPU利用率",
        "vm.memory_util": "虚拟机内存利用率",
      },
      containerMeterCnMap: {
        "k8s.cpu_util": "容器CPU利用率",
        "k8s.memory_util": "容器内存利用率",
      },
      appMeterCnMap: {
        "container.cpu_util": "应用CPU利用率",
        "container.memory_util": "应用内存利用率",
        // "container.net_rx_rate": "应用网络下行速率",
        // "container.net_tx_rate": "应用网络上行速率",
        // "container.fs_writes_rate": "应用磁盘写速率",
        // "container.fs_reads_rate": "应用磁盘读速率",
        // "container.respond_time": "应用响应时间",
      },
      meterCnMap: {
        "environment.air_in_temperature": "空调回风温度",
        "environment.air_out_temperature": "空调出风温度",
        "environment.air_setting_temperature": "空调设定温度",
        "environment.air_in_humidity": "空调回风湿度",
        "environment.air_out_humidity": "空调出风湿度",
        "environment.air_out_wind": "空调送风量",
        "environment.air_in_wind": "空调回风量",
        "environment.distribution_box_voltage": "配电箱实时电压",
        "environment.distribution_box_electron": "配电箱实时电流",
        "environment.distribution_box_power": "配电箱有功功率",
        "environment.distribution_box_energy": "配电箱有功电能",
        "environment.ups_in_voltage": "UPS输入电压",
        "environment.ups_out_voltage": "UPS输出电压",
        "environment.ups_in_frequency": "UPS输入频率",
        "environment.ups_out_frequency": "UPS输出频率",
        "environment.ups_temperature": "UPS温度",
        "environment.ups_battery_voltage": "UPS电池电压",
      },
      meterUnitMap: {
        "server.power": "W",
        "server.mem_total": "MB",
        "server.storage_total": "GB",
        "server.cpu_frequency": "GHz",
        "host.cpu_util": "%",
        "host.memory_util": "%",
        "switcher.in_octets": "KB/s",
        "switcher.out_octets": "KB/s",
        "host.cpu_load_1min": "",
        "server.bandWidth": "MB/s",
        "server.storage_available": "GB",
        "host.temperature": "°C",
        "server.mem_speed": "MHz",
        "host.disk_read_rate": "KB/s",
        "host.disk_write_rate": "KB/s",
        "vm.cpu_util": "%",
        "vm.memory_util": "%",
        "k8s.cpu_util": "%",
        "k8s.memory_util": "%",
        "container.cpu_util": "%",
        "container.memory_util": "%",
        "container.net_rx_rate": "KB/s",
        "container.net_tx_rate": "KB/s",
        "container.fs_writes_rate": "KB/s",
        "container.fs_reads_rate": "KB/s",
        "container.respond_time": "S",
      },
      typeMap: {
        1: "environment.air",
        2: "environment.ups",
        8: "environment.distribution",
      },
    };
  },
  mounted() {
    // this.loadDatacenterList();
    this.dashboardTimer = setInterval(this.setDashboardClasses, 30000);

    this.overviewDom = document.getElementById("overview");
    this.overviewDom.addEventListener("fullscreenchange", (event) => {
      this.isFullScreen = !!document.fullscreenElement;
    });
  },
  beforeDestroy() {
    if (this.dashboardTimer) {
      clearInterval(this.dashboardTimer);
    }
  },
  methods: {
    fullScreen() {
      if (this.overviewDom.requestFullscreen) {
        this.overviewDom.requestFullscreen();
      } else if (this.overviewDom.msRequestFullscreen) {
        this.overviewDom.msRequestFullscreen();
      } else if (this.overviewDom.mozRequestFullScreen) {
        this.overviewDom.mozRequestFullScreen();
      } else if (this.overviewDom.webkitRequestFullScreen) {
        this.overviewDom.webkitRequestFullScreen();
      }
    },
    exitFullScreen() {
      if (document.fullscreenElement === null) {
        return;
      }
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    },
    changeStyle(id) {
      if (id) {
        this.topoStyle = {
          display: "none",
        };
        this.indexStyle = {};
        this.loadResourceList(id);
      } else {
        this.indexStyle = {
          display: "none",
        };
        this.topoStyle = {};
        this.$refs.topoElement.loadDatacenterList();
      }
    },
    setDashboardClasses() {
      if (this.dashboardStatus === "normal") {
        this.dashboardStatus = "danger";
        this.dashboardClasses = [
          "dashboard-wrapper",
          "dashboard-wrapper-bg-danger",
        ];
      } else {
        this.dashboardStatus = "normal";
        this.dashboardClasses = [
          "dashboard-wrapper",
          "dashboard-wrapper-bg-normal",
        ];
      }
    },
    setObjIndex(calcType, i, list) {
      if (list && list.length) {
        const len = list.length;
        if (calcType === "plus") {
          ++i;
        } else if (calcType === "minus") {
          --i;
        }
        if (i < 0) {
          i = len - 1;
        } else if (i > len - 1) {
          i = 0;
        }
        return i;
      } else {
        return undefined;
      }
    },
    nextObj(calcType, resType) {
      if (resType === "air") {
        this.airIndex = this.setObjIndex(calcType, this.airIndex, this.airList);
        this.airObj = this.airList[this.airIndex];
      } else if (resType === "ups") {
        this.upsIndex = this.setObjIndex(calcType, this.upsIndex, this.upsList);
        this.upsObj = this.upsList[this.upsIndex];
      } else if (resType === "power") {
        this.powerIndex = this.setObjIndex(
          calcType,
          this.powerIndex,
          this.powerList
        );
        this.powerObj = this.powerList[this.powerIndex];
      } else if (resType === "server") {
        this.serverIndex = this.setObjIndex(
          calcType,
          this.serverIndex,
          this.serverList
        );
        this.serverObj = this.serverList[this.serverIndex];
        if (this.serverObj && this.serverObj.id) {
          this.loadItDeviceMeterData(6, this.serverObj.id);
        }
      } else if (resType === "switcher") {
        this.switcherIndex = this.setObjIndex(
          calcType,
          this.switcherIndex,
          this.switcherList
        );
        this.switcherObj = this.switcherList[this.switcherIndex];
        if (this.switcherObj && this.switcherObj.id) {
          this.loadItDeviceMeterData(7, this.switcherObj.id);
        }
      } else if (resType === "vm") {
        this.vmIndex = this.setObjIndex(calcType, this.vmIndex, this.vmList);
        this.vmObj = this.vmList[this.vmIndex];
        if (this.vmObj && this.vmObj.id) {
          this.loadCloudResMeterData(0, this.vmObj.id);
        }
      } else if (resType === "container") {
        this.containerIndex = this.setObjIndex(
          calcType,
          this.containerIndex,
          this.containerList
        );
        this.containerObj = this.containerList[this.containerIndex];
        if (this.containerObj && this.containerObj.id) {
          this.loadCloudResMeterData(1, this.containerObj.id);
        }
      } else if (resType === "app") {
        this.appIndex = this.setObjIndex(calcType, this.appIndex, this.appList);
        this.appObj = this.appList[this.appIndex];
        if (this.appObj && this.appObj.id) {
          this.loadAppMeterData(this.appObj.id);
        }
      }
    },
    loadDevice(type, id) {
      if (type === 1) {
        this.airMeterList = [];
        this.airList = [];
        this.airObj = {};
      } else if (type === 2) {
        this.upsMeterList = [];
        this.upsList = [];
        this.upsObj = {};
      } else if (type === 8) {
        this.powerMeterList = [];
        this.powerList = [];
        this.powerObj = {};
      }

      const postData = {
        pageNo: 1,
        pageSize: 999,
        datacenterId: id,
        type: type,
      };

      gPostAction("/asset/pageDevice", postData).then((res) => {
        const list = res.data ? res.data.list : undefined;
        if (res.success && list && list.length) {
          if (type === 1) {
            this.airList = list;
            this.airObj = list[0];
            this.airIndex = 0;
          } else if (type === 2) {
            this.upsList = list;
            this.upsObj = list[0];
            this.upsIndex = 0;
          } else if (type === 8) {
            this.powerList = list;
            this.powerObj = list[0];
            this.powerIndex = 0;
          }
        }
      });
    },
    loadItDevice(type, id) {
      if (type === 6) {
        this.serverMeterList = [];
        this.serverList = [];
        this.serverObj = {};
      } else {
        this.switcherMeterList = [];
        this.switcherList = [];
        this.switcherObj = {};
      }

      const postData = {
        pageNo: 1,
        pageSize: 999,
        datacenterId: id,
        type: type,
      };

      gPostAction("/asset/pageItDevice", postData).then((res) => {
        const list = res.data ? res.data.list : undefined;
        if (res.success && list && list.length) {
          if (type === 6) {
            this.serverList = list;
            this.serverObj = list[0];
            this.serverIndex = 0;
          } else {
            this.switcherList = list;
            this.switcherObj = list[0];
            this.switcherIndex = 0;
          }
          this.loadItDeviceMeterData(type, list[0].id);
        }
      });
    },
    loadCloudRes(type, id) {
      if (type === 0) {
        this.vmMeterList = [];
        this.vmList = [];
        this.vmObj = {};
      } else {
        this.containerMeterList = [];
        this.containerList = [];
        this.containerObj = {};
      }

      const postData = {
        pageNo: 1,
        pageSize: 999,
        datacenterId: id,
        type: type,
      };

      gPostAction("/cloud_resource/page", postData).then((res) => {
        const list = res.data ? res.data.list : undefined;
        if (res.success && list && list.length) {
          if (type === 0) {
            this.vmList = list;
            this.vmObj = list[0];
            this.vmIndex = 0;
          } else {
            this.containerList = list;
            this.containerObj = list[0];
            this.containerIndex = 0;
          }
          this.loadCloudResMeterData(type, list[0].id);
        }
      });
    },
    loadApp(id) {
      this.appMeterList = [];
      this.appList = [];
      this.appObj = {};

      const postData = {
        pageNo: 1,
        pageSize: 999,
        datacenterId: id,
      };

      gPostAction("/app/page", postData).then((res) => {
        const list = res.data ? res.data.list : undefined;
        if (res.success && list && list.length) {
          this.appList = list;
          this.appObj = list[0];
          this.appIndex = 0;
          this.loadAppMeterData(list[0].id);
        }
      });
    },
    loadDeviceMeterData(type, id) {
      if (type === 1) {
        this.airMeterList = [];
      } else if (type === 2) {
        this.upsMeterList = [];
      } else if (type === 8) {
        this.powerMeterList = [];
      }

      const postData = {
        resourceId: id,
        meter: this.typeMap[type],
      };
      gPostAction("/statistics/latestSamples", postData).then((res) => {
        const data = res.data;
        if (data && data.length) {
          if (type === 1) {
            this.airMeterList = data.slice(0, 4);
          } else if (type === 2) {
            this.upsMeterList = data.slice(0, 4);
          } else if (type === 8) {
            this.powerMeterList = data;
          }
        }
      });
    },
    loadItDeviceMeterData(type, id) {
      let map = {};
      let meterList = [];
      if (type === 6) {
        map = this.serverMeterCnMap;
        this.serverMeterList = [];
      } else {
        map = this.switchMeterCnMap;
        this.switcherMeterList = [];
      }
      let postData = {};
      postData.resourceId = id;
      Object.keys(map).forEach((item) => {
        postData.meter = item;
        gPostAction("/statistics/latestSample", postData)
          .then((res) => {
            if (res.success) {
              meterList.push({
                meter: item,
                volume: res.data,
              });
            }
          })
          .finally(() => {
            if (type === 6) {
              this.serverMeterList = meterList;
            } else {
              this.switcherMeterList = meterList;
            }
          });
      });
    },
    loadCloudResMeterData(type, id) {
      let map = {};
      let meterList = [];
      if (type === 0) {
        map = this.vmMeterCnMap;
        this.vmMeterList = [];
      } else {
        map = this.containerMeterCnMap;
        this.containerMeterList = [];
      }
      let postData = {};
      postData.resourceId = id;
      Object.keys(map).forEach((item) => {
        postData.meter = item;
        gPostAction("/statistics/latestSample", postData)
          .then((res) => {
            if (res.success) {
              meterList.push({
                meter: item,
                volume: res.data,
              });
            }
          })
          .finally(() => {
            if (type === 0) {
              this.vmMeterList = meterList;
            } else {
              this.containerMeterList = meterList;
            }
          });
      });
    },
    loadAppMeterData(id) {
      let map = {};
      let meterList = [];
      map = this.appMeterCnMap;
      this.appMeterList = [];
      let postData = {};
      postData.resourceId = id;
      Object.keys(map).forEach((item) => {
        postData.meter = item;
        gPostAction("/statistics/latestSample", postData)
          .then((res) => {
            if (res.success) {
              meterList.push({
                meter: item,
                volume: res.data,
              });
            }
          })
          .finally(() => {
            this.appMeterList = meterList;
          });
      });
    },
    loadResourceList(id) {
      this.loadGaugeData(id);
      this.loadPueData(id);
      this.loadTemperatureData(id);
      // airList
      this.loadDevice(1, id);
      // upsList
      this.loadDevice(2, id);
      // powerList
      this.loadDevice(8, id);
      // serverList
      this.loadItDevice(6, id);
      // switcherList
      this.loadItDevice(7, id);
      // vmList
      this.loadCloudRes(0, id);
      // containerList
      this.loadCloudRes(1, id);
      // appList
      this.loadApp(id);
      // airMeterList
      this.loadDeviceMeterData(1, id);
      // upsMeterList
      this.loadDeviceMeterData(2, id);
      // powerMeterList
      this.loadDeviceMeterData(8, id);

      this.loadRadarData(id);
    },
    loadRadarData(id) {
      this.radarData = [];
      const postData = {
        datacenterId: id,
      };

      gPostAction("/model/datacenterModelScore", postData).then((res) => {
        if (res.success && res.data && res.data.length > 0) {
          const data = res.data[0];
          this.totalScore = data.totalScore;
          data.scores.forEach((d, i) => {
            this.radarData.push({
              item: data.factors[i].layer + "：" + d.factorName + "评分",
              score: d.score,
              diff: data.factors[i].diff,
            });
          });
        }
      });
    },
    loadGaugeData(id) {
      const postData = {
        meter: "datacenter.load",
        resourceId: id,
      };

      gPostAction("/statistics/latestSamples", postData).then((res) => {
        if (res.success) {
          this.loadVal = res.data[0].volume;
        }
      });
    },
    loadPueData(id) {
      const postData = {
        meter: "datacenter.pue",
        resourceId: id,
      };

      gPostAction("/statistics/latestSamples", postData).then((res) => {
        if (res.success) {
          this.pueVal = res.data[0].volume;
        }
      });
    },
    loadTemperatureData(id) {
      const postData = {
        meter: "datacenter.temperature",
        resourceId: id,
      };

      gPostAction("/statistics/latestSamples", postData).then((res) => {
        if (res.success) {
          this.temperatureVal = res.data[0].volume;
        }
      });
    },
    loadDatacenterList() {
      this.datacenterList = [];

      gPostAction("/asset/pageDatacenter", { pageSize: 99 }).then((res) => {
        this.datacenterList.push(...res.data.list);
        const item = this.datacenterList[0];
        this.datacenterId = item.id;
        this.loadResourceList(item.id);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.control-btn {
  color: #fff;
  width: 15px;
}

.index-wrapper {
  background: url("../../../../assets/analysis/index_bg.png") no-repeat;
  background-size: 85% 93%;
  height: 100%;
  padding: 10px 20px 40px 20px;
  min-height: 850px;
  background-color: #fff;

  .contorller-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    margin-bottom: 10px;

    .ant-form-item {
      margin-right: 0;
    }
  }

  .item-wrapper {
    font-size: 14px;
    margin-bottom: 20px;

    .item-header {
      background-color: #017972;
      color: #fff;
      border-radius: 15px;
      padding: 4px 20px 0 20px;
      height: 30px;

      .item-header-left {
        display: inline-block;
        // border-left: 3px solid rgb(254, 138, 0);
        padding-left: 10px;
      }

      .item-header-right {
        display: inline-block;
        float: right;
      }
    }

    .item-body {
      border: 1px solid rgb(174, 222, 219);
      margin: 0 8px;
      min-height: 126px;

      .item-body-tr {
        padding: 5px 15px;

        .item-body-tr-left {
          display: inline-block;
        }

        .item-body-tr-right {
          display: inline-block;
          float: right;
        }
      }
    }
  }

  .middle-wrapper {
    .dashboard-wrapper-bg-normal {
      background: url("../../../../assets/analysis/index_dashboard.png")
        no-repeat center 50%;
    }
    .dashboard-wrapper-bg-danger {
      background: url("../../../../assets/analysis/index_dashboard_red.png")
        no-repeat center 50%;
    }
    .dashboard-wrapper {
      min-height: 250px;
      text-align: center;
      padding-top: 130px;
      cursor: pointer;

      .dashboard-wrapper-title {
        color: rgb(50, 116, 117);
        font-size: 18px;
      }

      .dashboard-wrapper-value {
        font-size: 32px;
        font-weight: bold;
        color: rgb(254, 138, 0);
        margin-bottom: 10px;
      }

      .dashboard-wrapper-others {
        font-size: 14px;

        img {
          margin-right: 5px;
        }

        .dashboard-wrapper-others-temperature {
          display: inline-block;
          margin-left: 8px;
        }

        .dashboard-wrapper-others-humidity {
          display: inline-block;
          margin-left: 8px;
        }
      }
    }

    .count-wrapper {
      margin-top: 25px;

      .count-item {
        padding-left: 30px;
        min-width: 150px;

        .count-item-img {
          display: inline-block;

          img {
            padding-bottom: 40px;
            height: 80px;
          }
        }

        .count-item-info {
          display: inline-block;
          margin-left: 10px;

          .count-item-info-title {
            display: block;
          }

          .count-item-info-number {
            display: block;

            .count-item-info-number-value {
              font-size: 26px;
              color: rgb(254, 138, 0);
            }
          }
        }
      }
    }
  }
}

.radar-title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  & > span {
    color: #333333;
    font-weight: 600;
    font-size: 16px;
  }

  .title-progress {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 50%;

    & > span {
      color: #333333;
      font-size: 12px;
    }
  }
}

/deep/ .ant-popover-inner {
  background-color: rgba(255, 255, 255, 0.95);
}
</style>